<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="100px"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="微信公众号"
          prop="weChatId"
        >
          <el-select
            v-model="form.weChatId"
            placeholder="请选择微信公众号"
          >
            <el-option
              v-for="item in weChatList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>

          </el-select>

        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="微信模板"
          prop="templateId"
        >
          <el-select
            v-model="form.templateId"
            placeholder="请选择微信模板"
          >
            <el-option
              v-for="item in templateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="模板内容">
          <div class="template_content">
            <div>
              <el-input
                v-model="form.firstData"
                type="text"
              >
              </el-input>
            </div>
            <div class="template_content_item">
              <span class="label">报名主题：</span>
              <el-input
                v-model="form.wxTitle"
                type="text"
              >
              </el-input>
            </div>
            <div class="template_content_item">
              <span class="label">报名状态：</span>
              <el-input
                v-model="form.wxStatus"
                type="text"
              >
              </el-input>
            </div>
            <div class="template_content_item">
              <el-input
                v-model="form.wxRemark"
                type="text"
              >
              </el-input>
            </div>
            <div class="template_content_example">
              <div>
                <label>参数赋值：</label>
                <span>微信公众号后台配置的消息模板</span>
              </div>
              <div>
                <label>first:</label>
                <span> 品牌大使开始招募了！</span>
              </div>
              <div>
                <label>keyword1:</label>
                <span> 报名品牌大使</span>
              </div>
              <div>
                <label>keyword2:</label>
                <span> 已获得资格，待报名确认</span>
              </div>
              <div>
                <label>remark:</label>
                <span> 参与品牌体验任务，可获取金币、新品试用及品牌体验活动等特权哦。快来添加微信报名吧！</span>
              </div>

            </div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="微信测试">
          <el-select
            v-model="form.member"
            placeholder="请选择微信模板"
          >
            <el-option
              v-for="item in memberList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button
            type="primary"
            class="connect_btn"
            @click="testConnect"
          >
            连接测试
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: 'WxForm',
  data() {
    return {
      memberList: [{
          label: '会员',
          value: "1"
        }],
        templateList: [
          {
            label: '520短信模板',
            value: "1"
          },
          {
            label: '618短信模板',
            value: "2"
          },
          {
            label: '双11短信模板',
            value: "3"
          }
        ],
        weChatList: [
          {
            label: '百胜软件',
            value: "1"
          },
          {
            label: '百胜营销',
            value: "2"
          }
        ],
        form: {
          name: '', // 节点名称
          templateId: '', // 微信模板
          weChatId: '', // 公众号
          member: '', // 会员
          firstData: '{{first.DATA}}',
          wxTitle: '{{keyword1.DATA}}',
          wxStatus: '{{keyword2.DATA}}',
          wxRemark: '{{remark.DATA}}'
        },
        rules: {
          templateId: [{ required: true, message: '请选择微信模板', trigger: 'change' }],
          weChatId: [{ required: true, message: '请选择微信公众号', trigger: 'change' }]
        }
    }
  },
  methods: {
    init(params) {
      const initForm = {
        templateId: '', // 微信模板
        weChatId: '', // 公众号
        member: '', // 会员
        firstData: '{{first.DATA}}',
        wxTitle: '{{keyword1.DATA}}',
        wxStatus: '{{keyword2.DATA}}',
        wxRemark: '{{remark.DATA}}'
      }
      this.form = { ...initForm, ...params }
    },
    testConnect() {
      if (!this.form.member) {
        this.$message({
          message: "请选择会员",
          type: "error"
        });
        return false;
      }
      this.$message({
        message: "发送成功",
        type: "success"
      });
    }
  }
}
</script>
<style lang='scss' scoped>
.connect_btn {
  margin-left: 5px;
}
.template_content {
  border: 1px solid #f1f1f1;
  padding: 5px;
  &_example {
    margin-top: 24px;
  }
  &_item {
    display: flex;
    margin-top: 5px;
    .label {
      display: block;
    }
    .el-input {
      flex: 1;
    }
  }
  ::v-deep {
    .el-input__inner {
      border: none;
      width: 180px;
      background-color: transparent;
      padding: 0;
    }
  }
}
</style>
